<template>
  <div id="managementControllerView">
    <el-row class="button-row" justify="start">
      <el-col :span="6">
        <el-button type="primary" @click="showMyProjects">我的项目</el-button>
        <el-button type="success" @click="showManagedProjects">我管理的项目</el-button>
      </el-col>
    </el-row>
    <div class="divider"></div>
    <el-row :gutter="20" class="project-row">
      <el-col :span="7" v-for="project in currentProjects" :key="project.id">
        <el-card @click="goToDetails(project.id)" class="project-card">
          <img :src="project.image" class="project-image" alt="Project Image" />
          <div class="card-content">
            <h3>{{ project.name }}</h3>
            <p>组长: {{ project.leaderName }}</p>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
import { ref,onMounted } from 'vue';
import { useRouter } from 'vue-router'; // 引入 useRouter
import ProjectImageA from '@/assets/logo.png';
import ProjectImageB from '@/assets/login.jpg';
import ProjectImageC from '@/assets/projectPictrue.jpg'
import axios from 'axios';

const Projects = ref([
  { id: 1, image: ProjectImageA, name: '项目A', leader: '张三', description: '项目A的详细信息' },
  { id: 2, image: ProjectImageA, name: '项目B', leader: '李四', description: '项目B的详细信息' },
  { id: 3, image: ProjectImageA, name: '项目B', leader: '李四', description: '项目B的详细信息' }
]);

const MyProjects = ref([
  { id: 3, image: ProjectImageB, name: '项目C', leader: '赵六', description: '项目C的详细信息' },
  { id: 4, image: ProjectImageB, name: '项目D', leader: '赵六', description: '项目D的详细信息' },
  { id: 8, image: ProjectImageB, name: '项目E', leader: '赵六', description: '项目D的详细信息' }
]);

const currentProjects = ref(Projects.value);
const r = ref("1")
const router = useRouter(); // 使用 useRouter
const showMyProjects = () => {
  r.value = "1";
  currentProjects.value = Projects.value;
};

const showManagedProjects = () => {
  r.value = "2";
  currentProjects.value = MyProjects.value;
};

const goToDetails = (id) => {
  if(r.value === "1")
    router.push({ name: 'memeber-project', params: { id } }); // 使用 router.push 跳转到成员项目详情页面
  else
    router.push({ name: 'project-management', params: { id } }); // 使用 router.push 跳转到管理项目详情页面
};

const fetchLeaderName = async (groupId) => {
  const response = await axios.get('http://localhost:8080/groupss/getLeader/'+groupId);
  return response.data.name;
};

const addImagesToProjects = (projects) => {
  return projects.map((project, index) => {
    const image = index % 2 === 0 ? ProjectImageA : ProjectImageB; // 选择图片
    return { ...project, image };
  });
};

onMounted(async () => {
  const user = JSON.parse(window.localStorage.getItem('token'))
  console.log(user)
  const projects = await axios.get('http://localhost:8080/projects/user/' + user.id+'/participated')
  const myproject = await axios.get('http://localhost:8080/projects/user/' + user.id+'/leader') 
  const projectsData = projects.data
  const myProjectsData = myproject.data

  // 处理 Projects
  const projectsWithLeaderNames = await Promise.all(projectsData.map(async (project) => {
    const leaderName = await fetchLeaderName(project.groupId); // 根据 groupId 获取组长名字
    return { ...project, leaderName };
  }));

  // 处理 MyProjects
  const myProjectsWithLeaderNames = await Promise.all(myProjectsData.map(async (project) => {
    const leaderName = await fetchLeaderName(project.groupId); // 根据 groupId 获取组长名字
    return { ...project, leaderName };
  }));

  Projects.value = addImagesToProjects(projectsWithLeaderNames);
  MyProjects.value = addImagesToProjects(myProjectsWithLeaderNames);
  console.log(Projects.value)
  console.log(MyProjects.value)
  currentProjects.value = Projects.value;
})
</script>

<style>
.button-row {
  padding-top: 20px;
  text-align: left;
  padding-left: 20px;
}

.divider {
  border-top: 1px solid #a3a3a3;
  margin: 20px 0;
}

.project-row {
  margin: 0 15px;
}

.project-card {
  margin: 15px;
  cursor: pointer; /* 添加手指图标样式 */
}

.project-card:hover {
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.2); /* 可选：增加悬停时的阴影效果 */
}

.project-image {
  width: 100%;
  height: 150px;
  object-fit: cover;
}

.card-content {
  text-align: center;
}
</style>
